<template>
  <!---------------------------------------------境外结算--------------------------------------------------->
  <el-form ref="overseasPaymentForm" :model="form" :inline="true" :rules="formRules" label-width="120px" label-position="right">
    <el-divider content-position="left">境外结算</el-divider>
    <!--境外结算方式 及 支付方式-->
    <el-row>
      <el-form-item label="境外结算方式:" prop="payStyle">
        <el-radio-group v-model="form.payStyle">
          <el-radio :label="0">送货前付款</el-radio>
          <el-radio :label="1">送货收票</el-radio>
          <el-radio :label="2">送货后付款</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.payStyle === 0 || form.payStyle === 1" label="支付方式:" prop="payFeeStyle">
        <el-radio-group v-model="form.payFeeStyle">
          <!--送货前付款-->
          <el-radio v-if="form.payStyle === 0" label="TT">转账</el-radio>
          <el-radio v-if="form.payStyle === 0" label="LC">信用证</el-radio>
          <!--送货收票 支票check bill, 期票 term bill-->
          <el-radio v-if="form.payStyle === 1" label="CB">支票</el-radio>
          <el-radio v-if="form.payStyle === 1" label="TB">期票</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-row>

    <!--送货前付款 送货收票-->
    <el-row v-if="form.payStyle === 0 || form.payStyle === 1">
      <el-form-item label="本次付款金额:" prop="payAmount">
        <el-input v-model.number="form.payAmount" class="input-with-select">
          <el-select slot="prepend" v-model="payPercent" placeholder="请选择付款比例" @change="changePayPercent">
            <el-option v-for="item in payPercentList" :key="item" :label="item * 100 + '%'" :value="item" />
          </el-select>
        </el-input>
      </el-form-item>
      <!--送货前付款 信用证 信用证天数-->
      <el-form-item v-if="form.payStyle === 0 && form.payFeeStyle === 'LC'" label="信用证天数:" prop="ticketDay">
        <el-input-number v-model="form.ticketDay" :controls="false" />
      </el-form-item>
      <!--送货收票 期票 期票天数-->
      <el-form-item v-if="form.payStyle === 1 && form.payFeeStyle === 'TB'" label="期票天数:" prop="termBillDay">
        <el-input-number v-model="form.termBillDay" :controls="false" />
      </el-form-item>
    </el-row>

    <!--送货前付款 信用证附件-->
    <el-row v-if="form.payStyle === 0 && form.payFeeStyle === 'LC'">
      <el-form-item label="信用证附件:">
        <FileUpload ref="lcFile" :file-tag="1" :max-size="5 * 1024 * 1024" accept="doc,jpg,png" />
      </el-form-item>
    </el-row>

    <!--送货前付款 送货收票-->
    <el-row v-if="form.payStyle === 0 || form.payStyle === 1">
      <el-form-item label="收款方户名:" prop="supplierBank">
        <el-select v-model.trim="form.supplierBank" value-key="id" filterable clearable remote :remote-method="getSupplierBankList" :loading="supplierBankLoading" :disabled="!supplierId" popper-class="common-select-popper">
          <el-option v-for="item in supplierBankList" :key="item.id" :label="item.accountName" :value="item" class="common-select-option">
            <div class="select-title">{{ item.accountName }}</div>
            <!--送货前付款才显示帐号-->
            <span v-if="form.payStyle === 0" class="select-other">
              {{ item.accountNo }}
              <el-divider direction="vertical" />
              {{ item.bankName }}
              <el-divider direction="vertical" />
              {{ item.bankSwiftCode }}
            </span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.payStyle === 0" label="收款人账号:">
        <el-input :value="form.supplierBank ? form.supplierBank.accountNo : ''" readonly />
      </el-form-item>
    </el-row>

    <!--送货前付款 送货收票-->
    <el-row v-if="form.payStyle === 0">
      <el-form-item label="开户银行:">
        <el-input :value="form.supplierBank ? form.supplierBank.bankName : ''" readonly />
      </el-form-item>
      <el-form-item label="Swift Code:">
        <el-input :value="form.supplierBank ? form.supplierBank.bankSwiftCode : ''" readonly />
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script>
import { supplierBankList } from '@/api/hfy/escm'
import FileUpload from '@/components/FileUpload'
import { mul } from '@/utils/calculate'
import { newValidator } from '@/utils/validate'
export default {
  name: 'OverseasPayment',
  components: { FileUpload },
  props: {
    supplierId: {
      type: [String, Number],
      default: ''
    },
    totalPrice: {
      type: Number,
      default: undefined
    },
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    // 除送货后付款2 支付方式必选
    const payFeeStyleValidator = newValidator(() => {
      if (this.form.payStyle === 2) {
        return true
      } else {
        if (!this.form.payFeeStyle) {
          return false
        } else {
          return true
        }
      }
    }, '支付方式必选')
    // 付款金额必填
    const payAmountValidator = newValidator(() => {
      // 送货后付款 不需填此值
      if (this.form.payStyle === 2) {
        return true
      } else {
        if (this.form.payAmount && this.form.payAmount > 0) {
          return true
        } else {
          return false
        }
      }
    }, '请输入有效付款金额')
    // 信用证需要天数
    const ticketDayValidator = newValidator(() => {
      if (this.form.payStyle === 0 && this.form.payFeeStyle === 'LC') {
        if (this.form.ticketDay && this.form.ticketDay > 0) {
          return true
        } else {
          return false
        }
      }
      return true
    }, '信用证天数必填')
    // 期票需要天数
    const termBillDayValidator = newValidator(() => {
      if (this.form.payStyle === 1 && this.form.payFeeStyle === 'TB') {
        if (this.form.termBillDay && this.form.termBillDay > 0) {
          return true
        } else {
          return false
        }
      }
      return true
    }, '期票天数必填')
    // 除送货后付款2 收款方必选
    const supplierBankValidator = newValidator(() => {
      if (this.form.payStyle === 2) {
        return true
      } else {
        if (this.form.supplierBank && this.form.supplierBank.id) {
          return true
        } else {
          return false
        }
      }
    }, '收款方户名必选')
    return {
      // 供应商银行下拉
      supplierBankList: [], supplierBankLoading: false,
      // 付款比例下拉 付款总额
      payPercent: '', payPercentList: [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1],
      formRules: {
        payStyle: [{ required: true, message: '境外结算方式必选', trigger: 'change' }],
        payFeeStyle: [{ required: true, validator: payFeeStyleValidator, trigger: 'change' }],
        payAmount: [{ required: true, validator: payAmountValidator, trigger: 'change' }],
        ticketDay: [{ required: true, validator: ticketDayValidator, trigger: 'change' }],
        termBillDay: [{ required: true, validator: termBillDayValidator, trigger: 'change' }],
        supplierBank: [{ required: true, validator: supplierBankValidator, trigger: 'change' }]
      }
    }
  },
  watch: {
    supplierId: {
      immediate: true,
      handler(value) {
        console.log('供应商ID变化, 清空供应商银行', value)
        // 刷新供应商银行即收款方
        this.form.supplierBank = ''
        // 清空供应商银行下拉框
        this.supplierBankList = []
        this.getSupplierBankList()
      }
    },
    totalPrice: {
      immediate: true,
      handler(value) {
        console.log('订单总金额变化', value)
        // 清空付款比例
        this.payPercent = ''
        // 设置新的付款金额
        this.form.payAmount = value
      }
    }
  },
  created() {
  },
  methods: {
    // 变更付款比例
    changePayPercent(percent) {
      this.form.payAmount = mul(this.totalPrice, percent)
    },
    // 收款方列表
    getSupplierBankList(query) {
      if (this.supplierId) {
        this.supplierBankLoading = true
        setTimeout(() => {
          supplierBankList({ keyword: query, page: 1, size: 10, supplierId: this.supplierId }).then(res => {
            this.supplierBankList = res
            this.supplierBankLoading = false
          }).catch(() => { this.supplierBankLoading = false })
        }, 200)
      }
    },
    self() {
      return this.$refs.overseasPaymentForm
    }
  }
}
</script>
